<template>
  <div :class="{ 'ly-is-full': isFull }">
    <div class="tableSelect" ref="tableSelect">
      <el-form :inline="true" :model="formInline" label-position="left">
        <!-- <el-form-item label="地区：">
                    <el-input v-model.trim="formInline.region_name" maxlength="60"  clearable placeholder="地区名称" @change="search" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="权限选择：">
                    <el-select v-model="formInline.group_name" placeholder="请选择权限" clearable style="width: 120px" @change="search">
                        <el-option
                                v-for="item in GroupList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item> -->
        <el-form-item label="名称：">
          <el-input
            v-model.trim="formInline.username"
            maxlength="60"
            clearable
            placeholder="工作人员名称"
            @change="search"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label=""
          ><el-button @click="search" type="primary" icon="Search"
            >查询</el-button
          ></el-form-item
        >
        <el-form-item label=""
          ><el-button @click="handleEdit('', 'reset')" icon="Refresh"
            >重置</el-button
          ></el-form-item
        >
        <el-form-item label=""
          ><el-button @click="addModule" type="primary" v-if="authority([2])"
            >添加</el-button
          ></el-form-item
        >
        <!-- <el-form-item label=""><el-button @click="handleDelete" type="danger" :disabled="multiple" v-show="isShowBtn('goodsType','商品分类','Delete')">删除</el-button></el-form-item> -->
      </el-form>
    </div>

    <div class="table">
      <el-table
        :height="tableHeight"
        border
        :data="tableData"
        v-loading="loadingPage"
        style="width: 100%"
        ref="tableref"
        @selection-change="handleSelectionChange"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!--                <el-table-column type="selection" width="55"></el-table-column>-->
        <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
        <el-table-column type="index" width="60" align="center" label="序号">
          <template #default="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="username"
          label="名称"
        ></el-table-column>
        <!-- <el-table-column min-width="100" prop="group_name" label="职位"></el-table-column> -->

        <el-table-column
          min-width="100"
          prop="region_name"
          label="负责区域"
          v-if="userInfo == 4 || userInfo == '4'"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="school_name"
          label="负责学校"
          v-if="userInfo == 4 || userInfo == '4'"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="class_name"
          label="负责班级"
          v-if="userInfo == 4 || userInfo == '4'"
        ></el-table-column>

        <el-table-column
          min-width="100"
          prop="mobile"
          label="电话号码"
        ></el-table-column>
        <el-table-column min-width="100" label="更新时间">
          <template #default="scope">
            <span
              v-text="formatDateTime(tableData[scope.$index].updatetime)"
            ></span>
          </template>
        </el-table-column>

        <!-- <el-table-column min-width="60" sortable prop="sort" label="排序"></el-table-column>
                <el-table-column min-width="80" prop="default_image" label="图标">
                    <template #default="scope">
                        <el-image  :src="scope.row.default_image" style="width: 30px;height:30px" :preview-src-list="[scope.row.default_image]" v-if="scope.row.default_image"></el-image>
                    </template>
                </el-table-column> -->
        <!--                <el-table-column min-width="100" label="状态" prop="status">-->
        <!--                    <template slot-scope="scope">-->
        <!--                        <el-tag v-if="scope.row.status" size="small">正常</el-tag>-->
        <!--                        <el-tag v-else type="danger" size="small">禁用</el-tag>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <el-table-column
          min-width="150"
          prop="createtime"
          label="创建时间"
        ></el-table-column>
        <el-table-column label="操作" width="180" v-if="authority([2])">
          <template #header>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div>操作</div>
              <div @click="setFull">
                <el-tooltip content="全屏" placement="bottom">
                  <el-icon><full-screen /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </template>
          <template #default="scope">
            <!--                        <span class="table-operate-btn" @click="handleEdit(scope.row,'detail')" v-show="isShowBtn('viptypeManage','会员卡管理','Retrieve')">详情</span>-->
            <span
              class="table-operate-btn"
              @click="handleEdit(scope.row, 'edit')"
              >编辑</span
            >
            <span
              class="table-operate-btn"
              @click="handleEdit(scope.row, 'delete')"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <add-module-goods-type
      ref="addModuleFlag"
      @refreshData="refreshData"
    ></add-module-goods-type>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination.vue";
import { dateFormats } from "@/utils/util";
import { staffList, staffDel, adminGroup } from "@/api/api";
import XEUtils from "xe-utils";
import AddModuleGoodsType from "./components/add.vue";
import { lyMixins } from "@/mixins/mixins";
import { setStorage, getStorage } from "@/utils/util";
import dayjs from "dayjs";
export default {
  mixins: [lyMixins],
  components: {
    AddModuleGoodsType,
    Pagination,
  },
  name: "adminManage",
  data() {
    return {
      userInfo: "",
      isFull: false,
      loadingPage: false,
      // 选项框选中数组
      ids: [],

      // 选项框非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      formInline: {
        page: 1,
        per_page: 10, 
      },
      pageparm: {
        page: 1,
        per_page: 10, 
        total: 0,
      },
      statusList: [
        { id: 1, name: "正常" },
        { id: 0, name: "禁用" },
      ],
      timers: [],
      tableData: [],
      selectData: [],
      GroupList: [], //管理员分组列表
    };
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    formatDateTime(time) {
      return dayjs.unix(time).format("YYYY-MM-DD HH:mm");
    },
    refreshData(x) {
      // 新增成功 搜索归0
      if (x) this.handleEdit("", "reset");
      else this.getData();
    },
    setFull() {
      this.isFull = !this.isFull;
      window.dispatchEvent(new Event("resize"));
    },
    // 表格序列号
    getIndex($index) {
      // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
      return (this.pageparm.page - 1) * this.pageparm.per_page + $index + 1;
    },
    //多选项框被选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 批量删除按钮操作 */
    handleDelete(row) {
      const ids = this.ids;
      let vm = this;
      vm.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return staffDel({ id: ids }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg);
            vm.search();
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    changeStatus(row) {
      console.log(row, "row----");
    },
    addModule() {
      console.log(this.GroupList, "---------新增出发");
      this.$refs.addModuleFlag.addModuleFn(null, "新增", this.GroupList);
    },
    handleEdit(row, flag) {
      if (flag == "detail") {
        this.$refs.addModuleFlag.addModuleFn(row, "详情", this.GroupList);
      } else if (flag == "edit") {
        this.$refs.addModuleFlag.addModuleFn(row, "编辑", this.GroupList);
      } else if (flag == "delete") {
        let vm = this;
        vm.$confirm("您确定要删除选中的数据吗？", {
          closeOnClickModal: false,
        })
          .then((res) => {
            staffDel({ id: row.id }).then((res) => {
              if (res.code == 1) {
                vm.$message.success(res.msg);
                vm.search();
              } else {
                vm.$message.warning(res.msg);
              }
            });
          })
          .catch(() => {});
      } else if (flag == "reset") {
        this.formInline = {
          page: 1,
          per_page: 10,
        };
        this.pageparm = {
          page: 1,
          per_page: 10,
          total: 0,
        };
        this.getData();
      }
    },

    callFather(parm) {
      this.formInline.page = parm.page;
      this.formInline.per_page = parm.per_page;
      this.getData();
    },
    search() {
      this.formInline.page = 1;
      this.formInline.per_page = 10;
      this.getData();
    },
    //获取列表
    async getData() {
      this.loadingPage = true;
      staffList(this.formInline).then((res) => {
        this.loadingPage = false;
        if (res.code == 1) {
          this.tableData = res.data.data;
          // // 将列表数据转换为树形数据
          // this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
          this.pageparm.page = res.data.current_page;
          this.pageparm.per_page = res.data.per_page;
          this.pageparm.total = res.data.total;
        }
      });
    },

    timeChange(val) {
      if (val) {
        this.formInline.beginAt = dateFormats(val[0], "yyyy-MM-dd hh:mm:ss");
        this.formInline.endAt = dateFormats(val[1], "yyyy-MM-dd hh:mm:ss");
      } else {
        this.formInline.beginAt = null;
        this.formInline.endAt = null;
      }
      this.search();
    },
    getGroupList() {
      // 管理员分组获取
      adminGroup().then((res) => {
        if (res.code == 1) {
          //console.log(res, "------------成功获取到管理员分组列表");
          this.GroupList = res.data;
        }
      });
    },
  },
  created() {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限

    // 获取管理员分组
    this.getGroupList();
    // 数据获取
    this.getData();
    this.userInfo = JSON.parse(getStorage("groupId"));
  },
};
</script>



